﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link href="/css/bootstrap.css" rel="stylesheet" />
    <link href="/css/bootstrap-theme.css" rel="stylesheet" />
    <link href="/css/site.css" rel="stylesheet" />
    <script src="/js/jquery.js"></script>
    <script src="/js/ModuleLoader.js"></script>
    <script src="/js/bootstrap.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="/js/FastHttpApi.js"></script>
    <script src="/js/Site.js"></script>
    <link rel="stylesheet"
          href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.13.1/build/styles/default.min.css">
    <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.13.1/build/highlight.min.js"></script>
    <script src="/js/highlight_pack.js"></script>
    <script src="/js/jquery_goup.js"></script>
    <script src="/js/Monitor.js"></script>
    <script src="/js/marked.js"></script>
    <script src="/js/lodash.js"></script>
    <title></title>
</head>
<body>


    <div class="navbar navbar-inverse navbar-fixed-left" slot="site-header">

    </div>

    <div class="container bs-docs-container">
        <div class="row">
            <div class="col-md-8" role="main">
                <div id="viewBlog">
                    <div class="blog-Detail">
                        <div class="panel-body">
                            <h4>
                                <span v-if="Data.SourceUrl" class="label label-warning">转</span>

                                <span v-else class="label label-success">原</span> <a href="#">{{Data.Title}}</a>
                            </h4>
                            <div style="margin-bottom:4px;">
                                <span class="btn btn-xs"><img src="/images/date.png" />{{Data.CreateTime}}</span>
                                <a :href="['/cate/'+Data.CategoryID+'.html']"><img src="/images/category.png" /> {{Data.Category}}</a>
                                <img src="/images/tags.png" />
                                <a v-for="tag in Data.Tags" :href="['/tag/'+encodeURIComponent(tag)+'.html']" :class="[getColor()]">{{tag}}</a>
                            </div>
                            <div v-html="compiledMarkdown" class="blog-Body" style=" line-height: 28px;padding-left:10px;">

                            </div>
                        </div>

                    </div>
                    <div v-if="Data.SourceUrl">
                        <b> 原文:<a :href="Data.SourceUrl" target="_blank">{{Data.SourceUrl}}</a></b>
                    </div>
                </div>

                <hr />
                <h5>评论列表</h5>
                <div id="lstComments">
                    <div v-for="(item,i) in Data" class="comment-item">
                        <div class="comment-header">
                            <a><span class="badge">#{{i+1}}楼</span></a>
                            <a class="btn btn-xs"><img src="/images/date.png" />{{item.CreateTime}}</a>
                            <a href="#">({{item.NickName}})</a>
                        </div>
                        <div v-html="marked(item.Content, { sanitize: true })" style="padding-left:20px;"></div>
                    </div>
                </div>
                <hr />
                <!--comment-->
                <form class="form-horizontal" id="addCommant">
                    <div class="form-group">
                        <label class="col-sm-offset-0 col-sm-11">发表评论</label>
                        <div class="col-sm-offset-0 col-sm-11">
                            <input type="text" v-model:value="nickName" class="form-control" placeholder="昵称">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-0 col-sm-11" style="margin-bottom:6px;">
                            <button type="button" onclick="$('#txtEditor').show(); $('#txtView').hide()" class="btn  btn-default btn-sm">编辑</button>
                            <button type="button" onclick="$('#txtEditor').hide(); $('#txtView').show()" class="btn  btn-default btn-sm">预览</button>
                            <a class="btn  btn-default btn-sm" href="http://www.freeimagehosting.net/" target="_blank">图片上传</a>
                            支持Markdown内容
                        </div>



                        <div id="txtEditor" class="col-sm-offset-0 col-sm-11">
                            <textarea :value="content" @input="update" rows="10" style="width:100%"></textarea>
                        </div>
                        <div id="txtView" style="display:none;height:220px;overflow-y: auto; overflow-x:hidden;" class="col-sm-offset-0 col-sm-11" v-html="compiledMarkdown">

                        </div>


                    </div>
                    <button type="button" onclick="saveComment()" class=" col-sm-offset-0 btn btn-default">提交</button>
                </form>

            </div>
            <div class="col-md-4 leftPack">

                <h4>关于</h4>
                <div slot="about"> </div>
                <h4>系统资源</h4>
                <div slot="system_info"> </div>
                <h4>热门标签</h4>
                <div slot="tags"></div>
                <h4>置顶</h4>
                <div slot="topBlog"></div>
                <h4>最新文章</h4>
                <div slot="newBlog"></div>
                <h4>最新评论</h4>
                <div slot="topComment"></div>
            </div>
        </div>
    </div>


    <div class="container" style="text-align:center; " slot="footer">

    </div>
    <script>
        marked.setOptions({
            targetBlank: true
        });
        var viewBlog;
        var lstComments;
        var addCommant;
        hljs.initHighlightingOnLoad();
        var btnStyles = ["btn btn-default btn-xs", "btn btn-primary btn-xs",
            "btn btn-success btn-xs", "btn btn-default btn-xs", "btn btn-info btn-xs", "btn btn-warning btn-xs", "btn btn-default btn-xs", "btn btn-danger btn-xs"];
        var colorIndex = 0;
        function getColor() {
            colorIndex++;
            return btnStyles[colorIndex % btnStyles.length];
        }
        $(document).ready(function () {
            addCommant = new Vue({
                el: '#addCommant', data: { nickName: '', content: '' },
                computed: {
                    compiledMarkdown: function () {
                        return marked(this.content, { sanitize: true })
                    }
                },
                methods: {
                    update: _.debounce(function (e) {
                        this.content = e.target.value
                    }, 300)
                }
            });

            lstComments = new Vue({ el: '#lstComments', data: { Data: [] } });

            viewBlog = new Vue({
                el: '#viewBlog',
                data: { Data: { Content: '' } },
                computed: {
                    compiledMarkdown: function () {

                        return marked(this.Data.Content, { sanitize: true })
                    }
                }
            });
            SiteGetBlog(_url.fileNameWithOutExt, true).execute(function (r) {
                viewBlog.Data = r.Data;
                if (document.title)
                    document.title = document.title + r.Data.Title;
                else
                    document.title = r.Data.Title;
            });

            $.goup({
                trigger: 100,
                bottomOffset: 50,
                locationOffset: 20,
                title: '',
                titleAsText: true
            });
            loadComments();
            setTimeout(function () {
                $('pre code').each(function (i, block) {
                    hljs.highlightBlock(block);
                    $('pre code').css("background-color", '#ffffff');
                    $('pre code').css("color", '#000');
                });
            }, 500);
           
        });

        function saveComment() {
            if (!addCommant.nickName) {
                alert('请输入你的昵称!');
                return;
            }
            if (!addCommant.content) {
                alert('请输入评论的内容!');
                return;
            }
            if (addCommant.content.length > 1000) {
                alert('评论内容不能超过1000个字符!');
                return;
            }
            SiteCommint(_url.fileNameWithOutExt, addCommant.nickName, addCommant.content, true).execute(function (r) {
                loadComments();
                addCommant.content = '';
                addCommant.nickName = '';
            });
        }

        function loadComments() {
            SiteListCommint(_url.fileNameWithOutExt).execute(function (r) {
                lstComments.Data = r.Data;
            });

        }

        function blogSearch() {
            var text = $('#txtSearch').val();
            if (text) {
                window.location.href = "/search/" + encodeURIComponent(text) + ".html";
            }
        }
    </script>
</body>

</html>